<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赫兹函数频率</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .content {
            margin: auto;
            width: 400px;
            max-width: 100%;
        }
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45px;
            border-bottom: 1px solid #bbbbbb;
            padding: 0 15px;
        }
        .title {
            color: rgba(0,0,0,.85);
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            text-align: right;
        }
        .time-text {
            color: #0023ff;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="row">
            <label class="title">Sum Reduce</label>
            <span class="time-text" id="sumReduce"></span>
        </div>
        <div class="row">
            <label class="title">Sum For Loop</label>
            <span class="time-text" id="sumForLoop"></span>
        </div>
    </div>
    <script>
        const reduceEle = document.getElementById('sumReduce');
        const loopEle = document.getElementById('sumForLoop');
        const hz = (handler, iterations = 100) => {
            const before = performance.now();
            for (let i = 0; i < iterations; i++) {
                handler();
            }
            return 1000 * iterations / (performance.now() - before);
        }
        const numbers = Array(10000).fill().map((_, i) => i);

        const sumReduce = () => numbers.reduce((acc, n) => acc + n, 0);
        const sumForLoop = () => {
            let sum = 0;
            for (let i = 0; i < numbers.length; i++) sum += numbers[i];
            return sum;
        };

        reduceEle.textContent =  Math.round(hz(sumReduce));// 572
        loopEle.textContent = Math.round(hz(sumForLoop)); // 4784
    </script>
</body>

</html>